frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import {useTranslation} from 'react-i18next';
4import EventLayout, {TabComponent} from '../../../layouts/Event';
5import TravelColumns from '../../../containers/TravelColumns';
6import NewTravelDialog from '../../../containers/NewTravelDialog';
7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
8import {
9 EventByUuidDocument,
10 useFindUserVehiclesQuery,
11} from '../../../generated/graphql';
12import useProfile from '../../../hooks/useProfile';
13import Fab from '../../../containers/Fab';
14import {
15 initializeApollo,
16 APOLLO_STATE_PROP_NAME,
17} from '../../../lib/apolloClient';
18
19interface Props {
20 eventUUID: string;
21}
22
23const Page = (props: PropsWithChildren<Props>) => {
24 return <EventLayout {...props} Tab={TravelsTab} />;
25};
26
27const TravelsTab: TabComponent = (props: {event}) => {
28 const classes = useStyles();
29 const {t} = useTranslation();
30 const {user} = useProfile();
31 const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}} =
32 useFindUserVehiclesQuery();
33 const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
34 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
35
36 const addTravelClickHandler =
37 user && vehicles?.length != 0
38 ? toggleVehicleChoice
39 : () => toggleNewTravel({opened: true});
40
41 return (
42 <>
43 <TravelColumns toggle={addTravelClickHandler} />
44 <Fab
45 onClick={addTravelClickHandler}
46 aria-label="add-car"
47 color="primary"
48 className={classes.bottomRight}
49 >
50 {t('travel.creation.title')}
51 </Fab>
52 <NewTravelDialog
53 context={openNewTravelContext}
54 toggle={() => toggleNewTravel({opened: false})}
55 />
56 <VehicleChoiceDialog
57 open={openVehicleChoice}
58 toggle={toggleVehicleChoice}
59 toggleNewTravel={toggleNewTravel}
60 vehicles={vehicles}
61 />
62 </>
63 );
64};
65
66const useStyles = makeStyles(theme => ({
67 bottomRight: {
68 bottom: 0,
69 right: theme.spacing(6),
70
71 [theme.breakpoints.down('sm')]: {
72 right: theme.spacing(1),
73 bottom: 56,
74 },
75 },
76}));
77
78export async function getServerSideProps(ctx) {
79 const {uuid} = ctx.query;
80 const {host = ''} = ctx.req.headers;
81
82 const apolloClient = initializeApollo();
83 const {data: {eventByUUID: event = null} = {}} = await apolloClient.query({
84 query: EventByUuidDocument,
85 variables: {uuid},
86 });
87
88 try {
89 return {
90 props: {
91 [APOLLO_STATE_PROP_NAME]: apolloClient.cache.extract(),
92 eventUUID: uuid,
93 metas: {
94 title: event?.name || '',
95 url: `https://${host}${ctx.resolvedUrl}`,
96 },
97 },
98 };
99 } catch (error) {
100 console.error(error);
101 return {props: {}};
102 }
103}
104
105export default Page;